import React, { Component, Fragment } from 'react';
import { Form, Input, Button, message, Row, Col, Table, Spin } from 'antd';
import { connect } from 'dva';
import { createModalContainer } from '@/components/changeModal';
import styles from './index.less';


const Search = Input.Search;


class CouponModal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            couponName: "",
            selectedUserIds: [],
            selectedUser: [],
            pagination: {
                showSizeChanger: false,
                showQuickJumper: false,
                showTotal: false,
                // showTotal: total => `共 ${total} 条记录`,
                pageSize: 10,
                total: 0,
                pageIndex: 1,
            },
        }
    }

    componentWillMount() {
        window.Isoption = false;
      }
      componentDidMount() {
        window.Isoption = true;
        this.GetCouponList();
      }

    searchCoupon = (value) => {
        console.log(value)
        this.setState({ couponName: value }, () => {
            this.GetCouponList();
        })
    }
    GetCouponList = () => {

        const { dispatch } = this.props;
        const { pagination, couponName } = this.state
        let search = {
            PageIndex: pagination.pageIndex,
            PageSize: pagination.pageSize,
            Name: couponName,
            Status: 0,
            p: Math.random()
        }

        dispatch({
            type: 'marketing/GetCouponsListWithPage',
            payload: search,
            callBack: {
                success: res => {
                    if (res.Code === 0) {
                        this.setState({ pagination: { ...pagination, total: res.Data.Total }, selectedUserIds: this.props.param.selectId })

                    }
                },
                error: res => {
                    message.error(res.Msg);
                },
            },
        });
    }
    // 取消
    handleCancel = () => {
        this.props.cancel();
    }
    handleSubmit = () => {
        const { dispatch } = this.props;
        this.props.ok(this.state.selectedUser);
    }
    onTableChange = (cpagination) => {
        let { pagination } = this.state;
        let data = {
            ...pagination,
            pageIndex: cpagination.current,
            pageSize: cpagination.pageSize,
        };
        this.setState({
            pagination: data,
        }, () => {
            this.GetCouponList()
        })
    }
    render() {
        const { couponsList, loading } = this.props;

        const { selectedUserIds } = this.state;

        const columns = [{
            title: '优惠券名称',
            dataIndex: 'Name',
            key: 'Name',
            align: 'left',
            // width: '20%',
        },
        {
            title: '适用商品',
            key: 'Goods',
            align: 'left',
            width: '10%',
            render: (text, item) => (
                <div>全部商品</div>
            ),
        },
        {
            title: '优惠内容',
            dataIndex: 'FormativeContext',
            key: 'FormativeContext',
            width: '23%',
            align: 'left'
        },
        {
            title: '限领次数',
            dataIndex: 'TotalTake',
            key: 'TotalTake',
            width: '13%',
            align: 'left'
        },
        {
            title: '状态',
            dataIndex: 'StatusName',
            key: 'StatusName',
            width: '10%',
            align: 'left'
        },
        {
            title: '剩余库存',
            dataIndex: 'TotalSurplus',
            key: 'TotalSurplus',
            width: '10%',
            align: 'right'
        },];
        const rowSelection = {
            selectedRowKeys: selectedUserIds,
            columnWidth: '18px',
            onChange: (selectedUserIds, selectedRows) => {
                this.setState({
                    selectedUserIds: selectedUserIds,
                    selectedUser: selectedRows
                });
            },
        };

        return (
            <Fragment>
                <Spin spinning={loading}>
                    <Row className="CouponModalHead">
                        <Col span={4}><Button
                           onClick={()=>{
                            window.open(`/#/${window.storeId}/marketing/coupon`)
                        }}
                        >优惠券管理</Button><a
                        onClick={()=>{
                            this.searchCoupon("")
                        }}
                        >刷新</a></Col>
                        <Col span={6} offset={14}>
                            <Search
                                placeholder="请输入优惠券名称"
                                onSearch={this.searchCoupon}
                                style={{ width: '100%' }}
                            />
                        </Col>
                    </Row>

                    <Table
                        pagination={this.state.pagination}
                        columns={columns}
                        dataSource={couponsList && couponsList.DataList ? couponsList.DataList : []}
                        rowSelection={rowSelection}
                        rowKey={record => record.Id}
                        onChange={this.onTableChange}
                        className={styles.CouponModalTable}
                    />

                    <Row className="ChoseGoodsfooter">
                        <Col>
                            <Button onClick={this.handleCancel} className="xkd-mr16">
                                取消
                        </Button>
                            <Button
                                type="primary"
                                onClick={this.handleSubmit}
                            >
                                确定
                        </Button>
                        </Col>
                    </Row>
                </Spin>
            </Fragment>


        )
    }
}
const Coupon = createModalContainer(
    connect(({ marketing, global, loading }) => ({
        couponsList: marketing.couponsList,
        oemInfo: global.oemInfo,
        loading: loading.effects['marketing/GetCouponsListWithPage'],
    }))(CouponModal),
    true,
    true
);
export default Coupon;
